<template>
    <div class="me">
        <div class="me_box">
            <div class="me_left">
                <img src="../../assets/dad3.png">
            </div>
            <div class="me_right">
                <div class="me_right_box" v-if="userid">
                    <div style="line-height:1rem" v-if="objList.memberName">{{objList.memberName}}</div>
                    <div style="line-height:1rem" v-else @click="melogin">请先登录</div>
                </div>
                <div class="me_right_box" v-else>
                    <div style="line-height:1rem" @click="melogin">请先登录</div>
                </div>
            </div>
            <img @click="melogin" src="../../assets/right.png" class="me_right_img">
        </div>
        <div class="me_list">
            <yd-cell-group style="margin-bottom:0">
                <!-- <yd-cell-item arrow href="/wealth" type="link" v-if="memberDetail == 1">
                    <yd-icon name="shuji" color='#C6B395' custom slot="icon" size=".42rem"></yd-icon>
                    <span slot="left">
                        我的钱包
                    </span>
                </yd-cell-item> -->
                <yd-cell-item arrow href="/order?pageFlg=me" type="link">
                    <yd-icon slot="icon" color='#C6B395' name="order" size=".42rem"></yd-icon>
                    <span slot="left">
                        我的订单
                    </span>
                </yd-cell-item>
                <yd-cell-item arrow href="/receiving" type="link">
                    <yd-icon slot="icon" color='#C6B395' name="location" size=".42rem"></yd-icon>
                    <span slot="left">
                        常用地址
                    </span>
                </yd-cell-item>
                <!-- <yd-cell-item arrow href="/email" type="link">
                    <yd-icon slot="icon" style="position:relative;top:1px" color='#C6B395' name="youxiang" custom size=".3rem"></yd-icon>
                    <span slot="left">
                        我的邮箱
                    </span>
                </yd-cell-item> -->
                <!-- <yd-cell-item arrow type="div" @click.native="lottery">
                    <img slot="icon" color='#C6B395' src="../../assets/withdraw.png" style="width:18px;height:18px;clear:both;display:block;margin:auto;color:#C6B395">
                    <span slot="left">彩红包提现</span>
                </yd-cell-item> -->
            </yd-cell-group>
        </div>
        <div class="me_list_bottm">
            <yd-cell-group style="margin-bottom:0">
                <!-- <yd-cell-item arrow href="/feedback" type="link">
                    <yd-icon slot="icon" color='#C6B395' name="feedback" size=".42rem"></yd-icon>
                    <span slot="left">意见反馈</span>
                </yd-cell-item> -->
                <yd-cell-item arrow href="/aboutme" type="link">
                    <yd-icon slot="icon" color='#C6B395' name="setting" size=".42rem"></yd-icon>
                    <span slot="left">关于我们</span>
                </yd-cell-item>
            </yd-cell-group>
        </div>
    </div>
</template>

<script>
export default {
    name: 'me',
    data() {
        return {
            userid: '',
            objList: {},
            unPayOrderNum: 0,
            addressNum: 0,
            memberDetail: 0,
            tranFlg: '',
            ylhdToken: ''
        }
    },
    created: function() {
        this.tranFlg = this.$route.query.tranFlg || '';
        this.$store.commit('routerTo', '/');
        this.userid = this.$store.state.userid;
        if (this.userid) {
            this.init();
        }

        // 易连互动的TokenID的取得
        this.getYlhdToken();
    },
    mounted: function() {
        let setReturnFlg = false;
        if (this.tranFlg == "order") {
            setReturnFlg = true;
        }
        window.addEventListener("popstate", (e) => {
                if(setReturnFlg)  {
                    setReturnFlg = false;
                    // 防止死循环（由订单页面返回时）
                    this.$router.push('/');
                }
            }, false);
    },
    methods: {
        init() {
            this.$dialog.loading.open('请稍后');
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'member/memberDetail')
                .then((response) => {
                    this.$dialog.loading.close();
                    if (response.status == 200) {
                        this.objList = response.data.object;
                        let email = response.data.object.memberEmail;
                        if (email.indexOf('cofco.com') > 0) {
                            this.memberDetail = 1;
                            this.$store.commit('memberDetail', 1);
                        }
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                });
        },
        getYlhdToken() {
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'lottery/getTokenId?appId=' + this.CONSTANT.lotteryAppId + '&appSecret=' + this.CONSTANT.lotteryAppSecret)
                .then((response) => {
                    if (response.status == 200) {
                        if (response.data.status == 1) {
                            if (response.data.object.code == "200") {
                                this.ylhdToken = response.data.object.tokenId;
                            }
                        }
                    }
                }).catch((error) => {
                   console.log("getYlhdToken error" + error);
                });
        },
        setAvatar() {
            // 本机调试时：不能根据userid来判断，需要根据memberMobile来判断
            // 正常使用时： this.userid也一样
            if (this.objList.memberMobile) {
                this.$router.push('/uploadFile');
            } else {
                this.$dialog.confirm({
                    title: '确认',
                    mes: '请登录后再设定头像。确定要登录？',
                    opts: [
                        {
                            txt: '取消',
                            color: false,
                            callback: () => {
                                // 什么也不处理
                            }
                        },
                        {
                            txt: '确定',
                            color: true,
                            callback: () => {
                                this.$router.push("/fastLogin");    // 没有权限时，跳转验证码登录
                            }
                        }
                    ]
                });
            }
        },
        melogin() {
            // 清空login后去商品详情页面的表示flg
            let detailPage = this.$store.state.detailPage || '';
            if (detailPage == undefined || detailPage == '') {
                // 什么也不处理
            } else {
                this.$store.commit('detailPage', '');
            }

            this.$router.push('/fastLogin');    // 没有权限时，跳转验证码登录
        },
        lottery() {
            // 本机调试时：不能根据userid来判断，需要根据memberMobile来判断
            // 正常使用时： this.userid也一样
            if (this.objList.memberMobile) {                
                // 易连互动的TokenID没有取到时
                if (this.ylhdToken == undefined || this.ylhdToken == '') {
                    this.$dialog.toast({
                            mes: '彩红包砸金蛋的TokenID取到失败，不能进行彩红包提现服务，请重新进入该页面！',
                            timeout: 1500
                        });
                    return false;
                }

                let param = "appId=" + this.CONSTANT.lotteryAppId;
                param = param + "&tokenId=" + this.ylhdToken;
                param = param + "&customerId="+this.objList.memberMobile;
                let lotteryUrl = this.CONSTANT.lotteryPersonalCenterUrl + "?" + param;
                this.$store.commit('pageToPage', 'meToLottery');
                window.location.replace(lotteryUrl);
            } else {
                this.$dialog.confirm({
                    title: '确认',
                    mes: '请登录后再查看中奖纪录和提现。确定要登录？',
                    opts: [
                        {
                            txt: '取消',
                            color: false,
                            callback: () => {
                                // 什么也不处理
                            }
                        },
                        {
                            txt: '确定',
                            color: true,
                            callback: () => {
                                this.$router.push("/fastLogin");      // 没有权限时，跳转验证码登录
                            }
                        }
                    ]
                });
            }
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.me_box {
    width: 100%;
    height: 3.2rem;
    overflow: hidden;
    background: #C6B395;
}
.me_box .me_left {
    width: 1.6rem;
    float: left;
    margin: 0.8rem 0.6rem;
    height: 1.6rem;
    overflow: hidden;
    background: #cbcbcb;
    position: relative;
    border-radius: 50%;
}
.me_box .me_left img {
     width: 70%;
    position: absolute;
    left: 15%;
    bottom: 0;
    height: 70%; 
    /* transform: scale(0.8);
     width: 100%;
    height: 100%;  */
}
.me_box .me_right {
    float: left;
    width: calc(100% - 2.8rem);
    height: 100%;
    overflow: hidden;
}

.me_list {
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    top: -5px;
    left: 0;
    padding-top: 10px;
    background: #fff;
}
.me .me_list b {
    margin-left: 0.2rem;
    color: #FF525D;
}

.me_right_box {
    width: 100%;
    height: 1rem;
    margin: 1.1rem 0;
    font-size: 14px;
    color: #fff;
    line-height: 0.5rem;
}
.me_right_img {
    position: absolute;
    right: 0.2rem;
    top: 0.2rem;
    width: 26px;
    height: 26px;
}

.me_list_bottm {
    margin-top: 0.2rem;
}

.me .icon-custom-shuji:before {
    font-size: 0.42rem!important;
}
</style>

<style>
.icon-custom-youxiang:before {
    font-size: 0.45rem;
}
</style>